<!-- 答题首页 -->
<template>
    <page-view-top-nav :element="element" />
    <div class="question-index-wrap">
        <img :src="customFeature.style['background-image']" class="background-mark" />

        <div
            v-if="customFeature.displayTitle"
            class="title-wrap"
            :style="{
                color: customFeature.titleTheme.color,
                fontSize: customFeature.titleTheme['font-size']
            }"
        >
            {{ customFeature.titleText }}
        </div>

        <div class="button-list">
            <template v-for="(item, index) in customFeature.buttonList" :key="index">
                <div
                    v-if="item.isShow"
                    :src="item.imgUrl"
                    :style="getButtonStyle(item)"
                    class="button-item"
                >
                    {{ item.title }}
                </div>
            </template>

            <div
                v-if="customFeature.displayNameText"
                class="footer-title"
                :style="{
                    color: customFeature.nameTheme.color,
                    fontSize: customFeature.nameTheme['font-size']
                }"
            >
                {{ customFeature.nameText }}
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import PageViewTopNav from '../../page-view-top-nav'
export default defineComponent({
    name: 'QuestionIndex',
    components: {
        PageViewTopNav
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { element } = toRefs(props)

        const customFeature = computed(() => element.value?.customFeature || {})

        const getButtonStyle = data => {
            const style = data.style
            return {
                color: style.color,
                fontSize: style['font-size'],
                fontWeight: style['font-weight'],
                backgroundColor: style['background-color'],
                backgroundImage: !!style['background-image'] ? `url(${style['background-image']})` : ''
            }
        }

        return {
            element,
            customFeature,

            getButtonStyle
        }
    }
})
</script>

<style lang="less" scoped>
@import './question-index.less';
</style>